<template>
  <el-timeline class="timeline" :reverse="true">
    <el-timeline-item
      class="animate__animated animate__slideInUp"
      v-for="(item, index) in curTimelineData"
      :key="item.title"
      :timestamp="item.timestamp"
      :color="index === curTimelineData.length - 1 ? '#409eff' : '#0bbd87'"
      :icon="
        index === curTimelineData.length - 1 ? 'el-icon-more' : 'el-icon-check'
      "
      placement="top"
    >
      <el-card>
        <div class="card-title" slot="header">{{ item.title }}</div>
        <div
          :class="{ 'card-content': true, 'full-width': !showStepBtn(item) }"
        >
          <i class="el-icon-info icon" ></i>{{ item.content[type] }}
        </div>
        <StepperBtn
          v-if="showStepBtn(item)"
          class="step-btn"
          :len="timelineData.length"
          :activeStep="curTimelineData.length - 1"
          @changeStep="changeStep"
          @complete="complete"
        />
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import StepperBtn from "@/components/StepperBtn/index.vue";
import { dateFormat } from "@/utils/dateFormat";
export default {
  components: {
    StepperBtn,
  },
  props: {
    timelineData: Array,
    autoPlay: Boolean,
  },
  data() {
    return {
      curTimelineData: [],
      type: this.$route.query.type,
    };
  },
  watch: {
    curTimelineData() {
      for (const item of this.curTimelineData) {
        if (!item.timestamp) {
          item.timestamp = this.getTimeStamp();
        }
      }
    },
  },
  methods: {
    showStepBtn(item) {
      if (
        this.curTimelineData[this.curTimelineData.length - 1] === item &&
        !this.autoPlay
      ) {
        return true;
      } else if (
        this.autoPlay &&
        this.timelineData[this.timelineData.length - 1] === item
      ) {
        return true;
      }
      return false;
    },
    getTimeStamp() {
      return dateFormat("YYYY/mm/dd HH:MM:SS", new Date());
    },
    add() {
      if (this.curTimelineData.length !== this.timelineData.length) {
        this.curTimelineData.push(
          this.timelineData[this.curTimelineData.length]
        );
        return true;
      }
      return false;
    },
    autoAdd() {
      const recursion = () => {
        setTimeout(() => {
          if (this.add()) {
            recursion();
          }
        }, 1000);
      };
      recursion();
    },
    changeStep(index) {
      if (index <= this.timelineData.length - 1 && index >= 0) {
        this.add();
      }
    },
    complete() {
      this.$message({
        message: "服务流程结束",
        type: "success",
      });
      const type = this.$route.query.type;
      if (type === "person") {
        this.$router.push({
          name: "Pay",
          query: { type },
        });
      } else {
        this.$router.push({
          name: "Comment",
          query: { type },
        });
      }
    },
  },
  created() {
    this.add();
    if (this.autoPlay) {
      this.autoAdd();
    }
  },
};
</script>

<style scoped>
.icon {
  color: #2196f3;
}
.timeline {
  padding: 1em 0 0;
}
.card-content {
  max-width: 12em;
}
.full-width {
  max-width: 100%;
}
.step-btn {
  position: absolute;
  right: 0.5em;
  bottom: 0;
}
</style>
